I'm trying to access total key from data.stats object from Cryptoranking RapidApi but it throw this error:

./src/components/Homepage.jsx 17:25

Module parse failed: Unexpected token (17:25) You may need an appropriate loader to handle this file type. isFetching = _useGetCryptosQuery.isFetching;

var globalStats = data?.data?.stats;

if (isFetching) return /#PURE/React.createElement(Loader, { __self: _this,

I've tried everything I knew so far to resolve this (object destructuring, reinstall react, update babel ), but nothing works.

Here are Homepage.jsx file:

import React from 'react'
import millify from 'millify';
import { Typography, Row, Col, Statistic } from 'antd';
import { Link } from 'react-router-dom';
import { useGetCryptosQuery } from '../services/cryptoApi';
import Loader from './Loader'; 

const { Title } = Typography; 

const Homepage = () => {
  const { data, isFetching } = useGetCryptosQuery();
  const globalStats = data?.data?.stats;

  if(isFetching) return <Loader />;

  console.log(data);
  console.log(globalStats);

  return (
    <>
      <Title level={2} className='heading'>Global Crypto Stats</Title>
      <Row>
        <Col span={12}> <Statistic title='Total Cryptocurrencies' value={globalStats.total}/></Col>
        <Col span={12}> <Statistic title='Total Exchanges' value='4'/></Col>
        <Col span={12}> <Statistic title='Total Market Cap' value='5'/></Col>
        <Col span={12}> <Statistic title='Total 24h Volume' value='5'/></Col>
        <Col span={12}> <Statistic title='Total Markets' value='5'/></Col>
      </Row>
    </>
  )
}

export default Homepage;

If I console.log(data) the API data is logged perfectly fine. But I still cannot access data.stats.total.

Console.log result image

Any ideas? Thanks!